<template>
  <SnPopup
    mode="bottom"
    v-bind="$attrs"
    v-model="show"
    :round="16"
    :showCancelButton="false"
    :showConfirmButton="false"
  >
    <view class="password-modal">
      <view class="modal-header">
        <text class="modal-title">{{ title }}</text>
        <u-icon
          name="close"
          size="20"
          color="#999"
          @click="closeModal"
          class="close-icon"
        ></u-icon>
      </view>

      <view class="password-instructions">
        <text>请输入6位钱包安全密码，以验证身份</text>
      </view>

      <view class="password-dots">
        <view
          v-for="(dot, index) in 6"
          :key="index"
          class="password-dot"
          :class="{
            filled: index < securityPassword.length,
            active: index === securityPassword.length,
          }"
        >
          <view v-if="index < securityPassword.length" class="dot-fill"></view>
        </view>
      </view>

      <view class="modify-password">
        <text @click="modifyPassword">修改安全密码</text>
      </view>

      <view class="keypad">
        <view
          class="keypad-row"
          v-for="(row, rowIndex) in keypadLayout"
          :key="rowIndex"
        >
          <view
            v-for="key in row"
            :key="key.value"
            class="keypad-key"
            :class="{ empty: key.type === 'empty' }"
            @click="handleKeypadInput(key)"
          >
            <text v-if="key.type === 'number'" class="key-text">{{
              key.value
            }}</text>
            <u-icon
              v-else-if="key.type === 'delete'"
              name="backspace"
              size="24"
              color="#333"
            ></u-icon>
          </view>
        </view>
      </view>
    </view>
  </SnPopup>
</template>

<script setup>
import { ref, defineExpose, defineProps, defineEmits, watch } from "vue";
import SnPopup from "@/components/common/snPopup.vue";
import { userApi } from "@/api/index";
import { showToast } from "@/utils/tools";

const emit = defineEmits(["confirm"]);

// 币种列表
const props = defineProps({
  title: {
    type: String,
    default: "支付密码",
  },
});

const show = ref(false);
const securityPassword = ref("");

// 数字键盘布局
const keypadLayout = ref([
  [
    { value: "1", type: "number" },
    { value: "2", type: "number" },
    { value: "3", type: "number" },
  ],
  [
    { value: "4", type: "number" },
    { value: "5", type: "number" },
    { value: "6", type: "number" },
  ],
  [
    { value: "7", type: "number" },
    { value: "8", type: "number" },
    { value: "9", type: "number" },
  ],
  [
    { value: "", type: "empty" },
    { value: "0", type: "number" },
    { value: "delete", type: "delete" },
  ],
]);
const openModal = () => {
  show.value = true;
};

const closeModal = () => {
  show.value = false;
};

// 跳转到修改支付密码页面
const modifyPassword = () => {
  uni.navigateTo({
    url: "/pages/setPaymentPassword/setPaymentPassword?type=edit",
  });
};

// 处理数字键盘输入
const handleKeypadInput = (key) => {
  if (key.type === "number") {
    if (securityPassword.value.length < 6) {
      securityPassword.value += key.value;
    }
  } else if (key.type === "delete") {
    securityPassword.value = securityPassword.value.slice(0, -1);
  }
};

// 监听密码输入完成
watch(
  () => securityPassword.value,
  (newVal) => {
    if (newVal.length === 6) {
      // 密码输入完成，自动提交
      setTimeout(() => {
        submitBankCard();
      }, 500);
    }
  }
);

const submitBankCard = async () => {
  uni.showLoading({ title: "验证中..." });
  try {
    const res = await userApi.payPwdCheckApi({
      pwd: securityPassword.value,
    });
    if (res.code === 0) {
      emit("confirm", securityPassword.value);
      closeModal();
    } else {
      showToast(res.desc || "验证失败", "none");
    }
  } catch (error) {
    showToast(error?.desc || "网络错误，请稍后重试", "none");
  } finally {
    uni.hideLoading();
    securityPassword.value = "";
  }
};

defineExpose({
  openModal,
  closeModal,
});
</script>

<style lang="scss" scoped>
.password-modal {
  padding: 32rpx;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32rpx;
    position: relative;

    .modal-title {
      font-size: var(--font-size-lg);
      font-weight: 600;
      padding-bottom: 40rpx;
    }
    .close-icon {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: 10rpx;
    }
  }

  .password-instructions {
    text-align: center;
    margin-bottom: 32px;

    text {
      font-size: var(--font-size-md);
      color: #666;
    }
  }

  .password-dots {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;

    .password-dot {
      width: 40px;
      height: 40px;
      border: 2px solid #e5e5e5;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &.filled {
        border-color: #007aff;
      }

      &.active {
        border-color: #ff8c00;
      }

      .dot-fill {
        width: 12px;
        height: 12px;
        background-color: #333;
        border-radius: 50%;
      }
    }
  }

  .modify-password {
    text-align: center;
    margin-bottom: 32px;

    text {
      font-size: var(--font-size-md);
      color: #ff8c00;
      cursor: pointer;
    }
  }

  .keypad {
    .keypad-row {
      display: flex;
      justify-content: space-between;
      gap: 20rpx;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .keypad-key {
        width: calc((100% - 40rpx) / 3);
        height: 100rpx;
        background-color: var(--bg-primary);
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: var(--shadow-light);

        &:active {
          background-color: var(--bg-grey);
          transform: scale(0.95);
        }

        &.empty {
          background-color: transparent;
          cursor: default;

          &:active {
            background-color: transparent;
            transform: none;
          }
        }

        .key-text {
          font-size: var(--font-size-lg);
          font-weight: 500;
        }
      }
    }
  }
}
</style>
